<template>
  <div class="dv-flyline-chart" :class="{ 'is-dark': isDark }">
    <svg :width="width" :height="height" viewBox="0 0 100 100">
      <defs>
        <linearGradient :id="`line-gradient-${uid}`" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :stop-color="color" stop-opacity="0.2" />
          <stop offset="50%" :stop-color="color" stop-opacity="1" />
          <stop offset="100%" :stop-color="color" stop-opacity="0.2" />
        </linearGradient>
        
        <filter :id="`glow-${uid}`">
          <feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>
      
      <!-- 起点 -->
      <circle
        :cx="points.start.x"
        :cy="points.start.y"
        r="3"
        :fill="color"
        opacity="0.8"
      >
        <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
      </circle>
      
      <!-- 终点 -->
      <circle
        :cx="points.end.x"
        :cy="points.end.y"
        r="3"
        :fill="color"
        opacity="0.8"
      >
        <animate attributeName="r" values="3;5;3" dur="2s" begin="1s" repeatCount="indefinite" />
      </circle>
      
      <!-- 飞线路径 -->
      <path
        :d="flylinePath"
        fill="none"
        :stroke="`url(#line-gradient-${uid})`"
        stroke-width="0.5"
        opacity="0.5"
      />
      
      <!-- 飞行点 -->
      <circle
        r="2"
        :fill="color"
        :filter="isDark ? `url(#glow-${uid})` : ''"
      >
        <animateMotion
          :path="flylinePath"
          dur="3s"
          repeatCount="indefinite"
        />
      </circle>
      
      <!-- 拖尾效果 -->
      <circle
        r="1.5"
        :fill="color"
        opacity="0.6"
      >
        <animateMotion
          :path="flylinePath"
          dur="3s"
          begin="0.1s"
          repeatCount="indefinite"
        />
      </circle>
      
      <circle
        r="1"
        :fill="color"
        opacity="0.3"
      >
        <animateMotion
          :path="flylinePath"
          dur="3s"
          begin="0.2s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  width?: number
  height?: number
  color?: string
  startPoint?: { x: number; y: number }
  endPoint?: { x: number; y: number }
}

const props = withDefaults(defineProps<Props>(), {
  width: 200,
  height: 100
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const uid = ref(`flyline-${Math.random().toString(36).substr(2, 9)}`)

const color = computed(() => {
  if (props.color) return props.color
  return isDark.value ? '#00d4ff' : '#409eff'
})

const points = computed(() => {
  const defaultStart = { x: 10, y: 80 }
  const defaultEnd = { x: 90, y: 20 }
  
  return {
    start: props.startPoint || defaultStart,
    end: props.endPoint || defaultEnd
  }
})

const flylinePath = computed(() => {
  const { start, end } = points.value
  
  // 确保所有值都是有效数字
  const sx = Number(start.x) || 10
  const sy = Number(start.y) || 80
  const ex = Number(end.x) || 90
  const ey = Number(end.y) || 20
  
  const controlY = Math.min(sy, ey) - 20
  const controlX = (sx + ex) / 2
  
  return `M ${sx} ${sy} Q ${controlX} ${controlY} ${ex} ${ey}`
})
</script>

<style lang="scss" scoped>
.dv-flyline-chart {
  display: inline-block;
  
  svg {
    display: block;
  }
}
</style>
